<template>
	<view class="big-box">
		<button @click="logClick">测试接口</button>
		<view class="header">
			<view class="header-logo"></view>
		</view>
		<view class="header-swiper">
			<SwiperPage :swipers="swipers"></SwiperPage>
		</view>
		<view class="main-box">
			<view class="nearby-recycling-machine">
				<image src="./../../static/images/Frame(2).png" mode="" class="addressImg"></image>
				<view class="address">成都</view>
				<image src="./../../static/images/Line 1.png" mode="" class="line"></image>
				<view class="num">共<span style="color: #0D98A2;">8</span>台</view>
				<view class="viewRecycling">查看地图附近回收机</view>
				<image src="./../../static/images/Frame(1).png" mode="" class="arrow"></image>
			</view>
			<Content :mainArr="mainArr"></Content>
			<view class="mainImg"></view>
			<view class="mainFont">附近回收机</view>
			<view class="exhibit">
				<view class="exhibit-box">
					<view class="exhibit-box-main">
						<view class="general-address">
							<view class="general-address-left">犀浦-西华阳光</view>
							<view class="general-address-right">
								<span>0.5km</span>
								<image src="./../../static/images/Frame.png" mode=""></image>
							</view>
						</view>
						<view class="detail-address">
							<view class="detail-address-left">四川省成都市西普细化阳光小区</view>
							<view class="detail-address-right">离你最近</view>
						</view>
						<view class="line-address"></view>
					</view>
					<!-- 第二个列表，此可循环 -->
					<view class="exhibit-box-main">
						<view class="general-address">
							<view class="general-address-left">犀浦-西华阳光</view>
							<view class="general-address-right">
								<span>0.5km</span>
								<image src="./../../static/images/Frame.png" mode=""></image>
							</view>
						</view>
						<view class="detail-address">
							<view class="detail-address-left">四川省成都市西普细化阳光小区</view>
							<view class="detail-address-right">离你最近</view>
						</view>
						<view class="line-address"></view>
					</view>
				</view>
				<!--   // -->
			</view>
		</view>
	</view>

</template>


<script>
	import {getSCeshiApi} from "@/apis/login.js"
	import Content from "./../../components/content-box.vue";
	import SwiperPage from "./../../components/swiperPage.vue";
	export default {
		data() {
			return {
				swipers: [{
						image_src: require('./../../static/images/banner1.png')
					},
					{
						image_src: require('./../../static/images/banner2.png')
					},
					{
						image_src: require('./../../static/images/Frame 59.png')
					}
				],
				mainArr: [{
						backImg: 'background-color:rgba(255, 162, 77, 0.12)',
						title: "积分兑换",
						titlePower: "去提现",
						icoImg: './../static/images/Frame(3).png',
						rightImg: "./../static/images/banner-one.png"
					},
					{
						backImg: 'background-color:rgba(13, 152, 162, 0.12)',
						title: "预约回收",
						titlePower: "找商家",
						icoImg: './../static/images/Frame(7).png',
						rightImg: "./../static/images/banner-2.png"
					},
					{
						backImg: 'background-color:rgba(249, 88, 88, 0.12)',
						title: "实景新闻",
						titlePower: "回收机站点",
						icoImg: './../static/images/Frame(4).png',
						rightImg: "./../static/images/banner-3.png"
					},

					{
						backImg: 'background-color:rgba(15, 79, 149, 0.12)',
						title: "宣教科普",
						titlePower: "智能碳综合",
						icoImg: './../static/images/Frame(6).png',
						rightImg: "./../static/images/banner-4.png"
					},
					{
						backImg: 'background-color:rgba(178, 24, 163, 0.12)',
						title: "商城",
						titlePower: "积分商城",
						icoImg: './../static/images/Frame(8).png',
						rightImg: "./../static/images/banner-5.png"
					},
					{
						backImg: 'background-color:rgba(55, 179, 127, 0.12)',
						title: "分拣中心",
						titlePower: "旧衣服分类",
						icoImg: './../static/images/Frame(5).png',
						rightImg: "./../static/images/banner-6.png"
					}
				]
			};
		},
		components: {
			Content,
			SwiperPage
		},
		methods: {
			onload(){
				// uni.getLocation({
					
				// })
			
			},
			logClick(){
				uni.login({
				       provider: 'weixin', //使用微信登录
				       success: function () {
				       //  console.log("loginRes",loginRes.code);
				       // console.log("this2",this);
				       //  uni.request({
				       //   url:`http://192.168.1.16:8081/getSessionId?code=${loginRes.code}`,
				       // method:"GET",
				       // data:{},
				       // success:function(res){
				       //  console.log("登录返回",res);
				       //  // this.sessionId = res.data.result.sessionId
				       //  // newThis.userProfile(res.data.result.sessionId)
				       // }
				       //  })
					   
					   getSCeshiApi()
					   .then((res)=>{
						   console.log(res,'res')
					   })
				       }
				    })
			},
			goMap: () => {
				uni.getLocation({
					success: (res) => {
						uni.navigateTo({
							url: `/pages/map/index?location=${JSON.stringify(res)}`,
						})
						console.log("获取地理位置", res);
					}
				})
			},
			goLogin: () => {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						uni.request({
							url: "http://192.168.1.9:8081/wx/login ",
							method: "POST",
							data: {
								code: loginRes.code
							}
						})
					}
				})
			},
			//tabbar的tab切换
			tabCheck: (e) => {
				console.log("父组件函数触发", e);
			}
		}
	}
</script>

<style lang="scss">
	.big-box {
		width: 750rpx;

		.header {
			// background-color: rgba(red, green, blue, alpha);
			width: 750rpx;
			height: 400rpx;
			background-image: url("./../../static/images/Frame 57.png");
			background-repeat: no-repeat;
			background-size: cover;
			overflow: hidden;

			.header-logo {
				width: 338rpx;
				height: 58.23rpx;
				margin-top: 88rpx;
				margin-left: 40rpx;
				background-image: url("./../../static/images/资源 1@4x 1.png");
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.header-swiper {
			margin-top: -218rpx;
			margin-bottom: 24rpx;
		}

		.main-box {
			width: 686rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;

			.nearby-recycling-machine {
				width: 686rpx;
				height: 64rpx;
				background-image: url("./../../static/images/Rectangle 39719.png");
				background-repeat: no-repeat;
				background-size: cover;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.addressImg {
					width: 24rpx;
					height: 28rpx;
					margin-left: 84rpx;
					margin-right: 24rpx;
				}

				.address {
					line-height: 34rpx;
					height: 34rpx;
					width: 48rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: bold;
					margin-right: 26rpx;
				}

				.line {
					height: 22rpx;
					width: 4rpx;
					margin-right: 26rpx;
				}

				.num {
					width: 64rpx;
					height: 34rpx;
					text-align: center;
					line-height: 34rpx;
					font-size: 24rpx;
					font-weight: bold;
					margin-right: 28rpx;
				}

				.viewRecycling {
					width: 216rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					font-size: 24rpx;
					margin-right: 36rpx;
				}

				.arrow {
					height: 22rpx;
					width: 15rpx;
				}
			}

			.mainImg {
				height: 154rpx;
				width: 686rpx;
				background-image: url("./../../static/images/新用户积分.png");
				background-size: cover;
				background-repeat: no-repeat;
				margin-top: -16rpx;
				margin-bottom: 20rpx;
			}

			.mainFont {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.exhibit {
				background-image: url("./../../static/images/Rectangle 39721.png");
				background-repeat: no-repeat;
				background-size: cover;
				width: 100%;

				.exhibit-box {
					width: 100%;
					min-height: 100rpx;
					padding-left: 14rpx;
					padding-right: 16rpx;
					padding-bottom: 18rpx;
					box-sizing: border-box;

					.exhibit-box-main {
						width: 100%;
						height: 100%;
					}

					.general-address {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 18rpx;

						.general-address-left {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-top: 22rpx;
						}

						.general-address-right {
							font-weight: bold;
							font-size: 28rpx;
							color: #0D98A2;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								margin-left: 12rpx;
								width: 20rpx;
								height: 28rpx;
							}
						}
					}

					.detail-address {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #666666;
						font-size: 24rpx;
						margin-bottom: 18rpx;
					}

					.line-address {
						border: 3rpx dashed gray;
						width: 100%;
					}
				}
			}
		}
	}
</style>